/**
 * Created by ziyu on 17/3/7.
 */
import React, {Component, PropTypes} from 'react'
import {fetchPost} from '../../../utils/request'
import {Table, message, Card} from 'antd'
import styles from './Index.less'

class List extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      refresh: false,
      params: {
        key: '',
        keyType: '',
        productType: null,
        borrowCashFrom: '',
        verifyType: 1,
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0,
      },
      list: this.props.list,
      id: null,
    }
  }

  //初始化方法
  componentDidMount() {

  }

  componentWillReceiveProps(props) {
    if (props.list.length > 0) {
      if (props.userCode !== this.state.userCode || props.list !== this.state.list) {
        this.setState({
          list: props.list,
          userCode: props.userCode,
          page: props.page
        })
      }
    } else {
      this.setState({
        list: [],
        id: null,
        userCode: null
      })
    }
  }

  //请求数据
  // getData () {
  //   let mobile = this.state.params.mobile
  //   // debugger;
  //
  //   if (typeof(mobile) === 'undefined') {
  //     return false
  //   }
  //
  //   let url = `/user/mobile/${mobile}?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`
  //   let urlNew = `/user/userlist/by/type/v2?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`
  //   fetchPost(urlNew, this.state.params).then(json => {
  //     if (json.code === 0) {
  //       let list = json.data.userInfoVOList
  //       console.log(list,';list')
  //       if (list.length > 0) {
  //         // let page = json.data.page
  //         this.setState({
  //           list,
  //           userCode: list[0].userCode,
  //           loading: false
  //         },()=>{
  //           console.log(this.state.list,'this.state.list1323')
  //         })
  //
  //         this.props.changeOrder({
  //           userCode: list[0].userCode,
  //         })
  //       } else {
  //         this.setState({
  //           list,
  //           userCode: null,
  //           loading: false
  //         })
  //
  //         this.props.changeOrder({
  //           userCode: null,
  //           refresh: false,
  //         })
  //       }
  //     } else {
  //       message.error(json.msg)
  //     }
  //   })
  // }

  //单击行
  handleClickRow(record) {
    this.setState({
      userCode: record.userCode,
    }, () => {
      this.props.changeOrder({
        userCode: record.userCode,
        tradeNo: record.tradeNo,
      })
    })
  }

  //单击行 样式改变
  handleChosedRow(itemId) {
    if (itemId === this.state.userCode) {
      return `${styles.listItem} ${styles.active}`
    } else {
      return styles.listItem
    }
  }

  show(count, overCount) {
    let color = '#2db7f5'
    if (overCount > 0) {
      color = 'red'
    }
    return <div>
      <a href="JavaScript:void(0);">{count} / <span
        style={{color,}}>{overCount}</span></a>
    </div>
  }

  setPagination() {
    let self = this
    return {
      total: this.state.page.totalCount,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal(total) {
        return `Total ${total} `
      },
      onChange(current) {
        self.setState({
          page: {
            ...self.state.page,
            current
          }
        }, () => {
          self.props.currentPage(current)
        })
      }
    }
  }


  render() {
    let self = this
    console.log(this.state.list, 'this.state.list======')
    const columns = [
      {
        title: 'Product',
        dataIndex: 'productCategory',
        key: 'productCategory',
      }, {
        title: 'Name',
        dataIndex: 'userName',
        key: 'userName',
      }, {
        title: 'Phone/Aadhaar',
        key: 'mobile',
        dataIndex: '',
        render: (text, record) => (
          <div>
            {`${record.mobile}`}
            <br/>
            {`${record.identityNo}`}
          </div>
        ),
        textAlign: "center"
      }, {
        title: 'Apply Num/Loan Num/Overdue Num',
        key: 'count',
        dataIndex: 'count',
        render: (text, record) => (
          <div>
            {`${record.applyCount}/`}
            {`${record.passCount}/`}
            {`${record.overdueCount}`}
          </div>
        ),
        width: 50
      }, {
        title: 'Register Date',
        key: 'registerDate',
        dataIndex: 'registerDate',
        render: (text, record) => (
          <div>
            {record.registerDate != null ? `${record.registerDate.split(" ")[0]}` : ``}
          </div>
        ),
      }
    ]

    return (

      <div className="ant-layout-container">
        <Card bodyStyle={{padding: 0, height: 1300, width: 'auto'}} bordered={false} noHovering={true}>
          <Table pagination={this.setPagination(this)} key='borrowNo' columns={columns} style={{textAlign: "center",}}
                 dataSource={self.state.list}
                 bordered
                 onRowClick={(record) => this.handleClickRow(record)}
                 rowClassName={(record) => this.handleChosedRow(
                   record.userCode)}
                 size="small"
          >
          </Table>
        </Card>
      </div>

    )
  }
}

export default List
